import React, { useState } from 'react';
import PortraitStylePanel from '@/components/leftpanels/portrait-style-panel';
import Text2ImgPanel from '@/components/leftpanels/text-to-Img-panel';
import Header from '@/components/leftpanels/header';
import styles from './index.less';

interface MainPanelProps {
  imageUrl?: string;
  setImageUrl: React.Dispatch<React.SetStateAction<string | undefined>>;
  onTaskGenerated: (taskId: string, model: string) => void;
}

// 切换模型，控制左面板的渲染
const MainPanel: React.FC<MainPanelProps> = ({ imageUrl, setImageUrl, onTaskGenerated }) => {
  const [currentPanel, setCurrentPanel] = useState<string>('portraitStyle');

  // 切换模型
  const handleModelChange = (model: string) => {
    console.log('Panel changing to:', model);
    setCurrentPanel(model);
    setImageUrl(undefined);
  };

  // 渲染面板
  const renderPanel = () => {
    const props = {
      imageUrl,
      setImageUrl,
      onTaskGenerated,
    };

    console.log('Rendering panel:', currentPanel);

    switch (currentPanel) {
      case 'portraitStyle':
        return <PortraitStylePanel {...props} />;
      case 'text2img':
        console.log('Rendering Text2ImgPanel');
        return <Text2ImgPanel {...props} />;
      default:
        console.log('No matching panel');
        return null;
    }
  };

  return (
    <div className={styles.mainPanel}>
      <Header onModelChange={handleModelChange} />
      {renderPanel()}
    </div>
  );
};

export default MainPanel; 